<template>
	<div>
   <div class="app_box">
     <div class="signin">
       <div class="signin_title">
         <div class="signin_logo"></div>
         <div class="signin_desc">数字货币质押贷款首选平台</div>
       </div>
       <div class="signin_tab">
         <div class="signin_tab_item" :class="{'signin_tab_active':$store.state.login.isToggle==0}" @click="$store.commit('login/onAllBaseCommit',{value:0,name:'isToggle'})">手机号登录</div>
         <div class="signin_tab_item" :class="{'signin_tab_active':$store.state.login.isToggle==1}" @click="$store.commit('login/onAllBaseCommit',{value:1,name:'isToggle'})">注册</div>
       </div>
       <div class="signin_box">
         <div class="signin_box_item" v-show="$store.state.login.isToggle==0">
           <!-- 登录 -->
           <div class="signin_input">
             <el-input placeholder="手机号" @keydown.native.13="onLcodeBtn" prefix-icon="el-icon-phone" v-model.trim="phone">
             </el-input>
           </div>
           <div class="signin_input">
             <el-input maxlength="6" placeholder="验证码" prefix-icon="el-icon-message" @keydown.native.13="onSigninBtn" ref="lcontent" v-model.trim="lcode">
             </el-input>
             <el-button class="signin_code" :disabled="$store.state.login.lcodeText!='获取验证码'" :loading="$store.state.login.lcodeText=='加载中...'" @click="onLcodeBtn">{{$store.state.login.lcodeText}}</el-button>
           </div>
           <!-- disabled -->
           <div class="signin_btn">
             <el-button type="primary" style="width:100%;" :disabled="lcode==''" @click="onSigninBtn">登录</el-button>
           </div>
         </div>
         <div class="signin_box_item" v-show="$store.state.login.isToggle==1">
           <!-- 注册 -->
           <div class="signin_input">
             <el-input placeholder="手机号" @keydown.native.13="onRcodeBtn" prefix-icon="el-icon-phone" v-model.trim="phone">
             </el-input>
           </div>
           <div class="signin_input">
             <el-input placeholder="验证码" @keydown.native.13="onRcodeBtn" prefix-icon="el-icon-message" ref="rcontent" v-model.trim="rcode">
             </el-input>
             <el-button class="signin_code" :disabled="$store.state.login.rcodeText!='获取验证码'" :loading="$store.state.login.rcodeText=='加载中...'" @click="onRcodeBtn">{{$store.state.login.rcodeText}}</el-button>
           </div>
           <div class="signin_input">
             <el-input placeholder="邀请码" prefix-icon="el-icon-service" ref="icontent" v-model.trim="inviteCode">
             </el-input>
           </div>
           <div class="signin_btn">
             <div class="signin_btn_text" @click="$store.commit('login/onAllBaseCommit',{value:0,name:'isToggle'})">使用已有账户登录</div>
             <el-button type="primary" style="width:120px;" :disabled="rcode==''||inviteCode==''" @click="onSignupBtn">注册</el-button>
           </div>
         </div>
       </div>
     </div>
   </div>
  </div>
</template>

<script>
export default {
  transition: 'page',
  components: {
  },
  data(){
  	return {
    };
  },
  computed:{
    phone:{
      get(){
        return this.$store.state.login.phone;
      },
      set(value){
        this.$store.commit('login/onAllBaseCommit',{value,name:'phone'});
      }
    },
    lcode:{
      get(){
        return this.$store.state.login.lcode;
      },
      set(value){
        this.$store.commit('login/onAllBaseCommit',{value,name:'lcode'});
      }
    },
    rcode:{
      get(){
        return this.$store.state.login.rcode;
      },
      set(value){
        this.$store.commit('login/onAllBaseCommit',{value,name:'rcode'});
      }
    },
    inviteCode:{
      get(){
        return this.$store.state.login.inviteCode;
      },
      set(value){
        this.$store.commit('login/onAllBaseCommit',{value,name:'inviteCode'});
      }
    }
  },
  methods:{
    // sign in btn
    async onSigninBtn(){
      const {phone,lcode} = this.$store.state.login;
      //   进行空值检测
      if (!phone) {
        this.$message({
          message: `手机号不能为空`,
          type: "warning"
        });
        return false;
      }
      if (!lcode) {
        this.$message({
          message: `验证码不能为空`,
          type: "warning"
        });
        return false;
      }
      if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/).test(phone)) {
        this.$message({
          message: `请输入正确的手机号`,
          type: "warning"
        });
        return false;
      }
      // 请求
      const {env,login}=this.$addr;
      const params = {
        loginName: phone,
        checkcode: lcode,
        loginType: 1,
      };
      await this.$requestPost(this,`${env}${login}`,params);
      this.$router.replace({
        path: "/"
      });
    },
    // sign up btn
    async onSignupBtn(){
      const {phone,rcode,inviteCode} = this.$store.state.login;
      //   进行空值检测
      if (!phone) {
        this.$message({
          message: `手机号不能为空`,
          type: "warning"
        });
        return false;
      }
      if (!rcode) {
        this.$message({
          message: `验证码不能为空`,
          type: "warning"
        });
        return false;
      }
      if (!inviteCode) {
        this.$message({
          message: `邀请码不能为空`,
          type: "warning"
        });
        return false;
      }
      if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/).test(phone)) {
        this.$message({
          message: `请输入正确的手机号`,
          type: "warning"
        });
        return false;
      }
      // 请求
      const {env,inviteRegister}=this.$addr;
        const params = {
          loginName: phone,
          checkcode: rcode,
          inviteCode: inviteCode,
        };
      return await this.$requestPost(this,`${env}${inviteRegister}`,params);
      this.$router.replace({
        path: "/"
      });
    },
    // sign in get code
    async onLcodeBtn(){
      const {phone} = this.$store.state.login;
      if (this.onPhoneIsRight()) {
        // 注册验证
        const isToggle = await this.onPhoneRepeat(phone);
        if (isToggle) {
          // 注册
          this.$refs.lcontent.focus()
          // 请求登录密码
          this.$store.dispatch('login/onAllbaseDispatch',{value:'加载中...',name:'lcodeText'});
          this.requestLcode(phone);
        } else {
          // 未注册
          this.$message({
            message: '手机号未注册，不能登录',
            type: 'warning'
          });
        }
      }
    },
    // sign up get code
    async onRcodeBtn(){
      const {phone} = this.$store.state.login;
      if (this.onPhoneIsRight()) {
        // 注册验证
        const isToggle = await this.onPhoneRepeat(phone);
        if (!isToggle) {
          // 注册
          this.$refs.rcontent.focus()
          // 请求登录密码
          this.$store.dispatch('login/onAllbaseDispatch',{value:'加载中...',name:'rcodeText'});
          this.requestRcode(phone);
        } else {
          // 未注册
          this.$message({
            message: '手机号已经注册，请直接登录',
            type: 'warning'
          });
          this.$store.commit('login/onAllBaseCommit',{value:0,name:'isToggle'});
        }
      }
    },
    // 请求注册验证码
    async requestRcode(mobile){
      const {env,sendRegisterCheckCode}=this.$addr;
      const params = {
        mobile: mobile,
      };
      await this.$requestPost(this,`${env}${sendRegisterCheckCode}`,params);
      this.onCountdown(false);
      // 成功处理
      this.$message({
        message: '发送注册验证码成功',
        type: 'success'
      });
      this.$store.commit('login/onAllBaseCommit',{value:'',name:'rcode'});
      this.$refs.rcontent.focus()
    },
    // 请求登录验证码
    async requestLcode(mobile){
      const {env,sendLoginCheckCode}=this.$addr;
      const params = {
        mobile: mobile,
      };
      await this.$requestPost(this,`${env}${sendLoginCheckCode}`,params);
      this.onCountdown(true);
      // 成功处理
      this.$message({
        message: '登录验证码发送成功',
        type: 'success'
      });
      this.$store.commit('login/onAllBaseCommit',{value:'',name:'rcode'});
      this.$refs.lcontent.focus();
    },
    // 倒计时
    onCountdown(isSignin){
      let timing = this.$store.state.login.timing;
      let name = '';
      if(isSignin){
        // 登录
        name = 'lcodeText';
      }else{
        // 注册
        name = 'rcodeText';
      }
      this.$store.dispatch('login/onAllbaseDispatch',{value:timing,name});
      let codeTime = setInterval(() => {
        this.$store.dispatch('login/onAllbaseDispatch',{value:--timing,name});
        if (this.$store.state.login[name] <= 0) {
          clearInterval(codeTime);
          this.$store.dispatch('login/onAllbaseDispatch',{value:'获取验证码',name});
        }
      }, 1000);
    },
    // 验证手机号是否正确
    onPhoneIsRight() {
      const {phone} = this.$store.state.login;
      const phoneRtn = (/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/).test(phone);
      if (phoneRtn) {
        return true;
      } else {
        // 手机号错误
        this.$message({
          message: '请输入正确的手机号!',
          type: 'warning'
        });
        return false;
      }
    },
    // 验证手机号是否存在
    async onPhoneRepeat(mobile) {
      const {env,checkUserName}=this.$addr;
      const params = {
        loginName: mobile
      };
      return await this.$requestPost(this,`${env}${checkUserName}`,params);
    },
  },
  watch: {
    rcode: function (val) {
      if (val.length == 6) {
        this.$refs.icontent.focus()
      }
    },
  },
  created(){
  }
}
</script>

<style scoped>
@import url("../assets/css/pages/login.css");
</style>